<script setup lang="ts">
import { ref } from 'vue'
import { REGEX_MOBILE } from '@/libs/validate'
import SliderCaptcha from '@/components/slide-captcha/SliderCaptcha.vue'
import { doGetStoreInfoByShopAssistantPhone } from '@/apis/home'
import QCountDown from '@/components/q-count-down/q-count-down.vue'
import { useUserStore } from '@/store/modules/user'
import { useStoreInfoStore } from '@/store/modules/storeInfo'
import { doPostSmsCode, doSignByUser } from '@/apis/sign/index'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { GrantType } from '@/apis/sign/type'

onLoad(() => {
    uni.$emit('updateTitle')
})
const tel = ref('')
const code = ref('')
const countDownRef = ref()
const countDown = ref(66000)
const hasCountDown = ref(false)
const showSliderCaptcha = ref(false)
const $userStore = useUserStore()
const $useStoreInfoStore = useStoreInfoStore()

onShow(() => {
    if (!$userStore.token) return
    uni.reLaunch({ url: '/pages/home/Index' })
})

const getCodeHandle = async () => {
    if (!REGEX_MOBILE(tel.value)) {
        uni.showToast({
            title: '请输入正确手机号',
        })
        return
    }
    showSliderCaptcha.value = true
}
const countFinishHandle = () => {
    hasCountDown.value = false
    countDownRef.value.reset()
}
const success = (e: { data: string }) => {
    hasCountDown.value = true
    countDownRef.value.start()
    showSliderCaptcha.value = false
    code.value = e.data
}
const handleSign = async () => {
    if (!code.value || !REGEX_MOBILE(tel.value))
        return uni.showToast({
            title: '请输入正确手机号或验证码',
            icon: 'none',
        })
    const {
        data,
        code: staus,
        msg,
    } = await doSignByUser(GrantType.SMS_CODE, {
        mobile: tel.value,
        code: code.value,
    })
    console.log('staus', staus)
    if (staus === 20) {
        uni.showToast({
            title: '验证码已失效或用户不是店员',
            icon: 'none',
        })
        return
    }
    if (staus !== 200 || !data) {
        return uni.showToast({
            title: `${msg ? msg : '登录失败'}`,
            icon: 'none',
        })
    }
    const { value: access_token, refreshToken } = data
    $userStore.ADD_TOKEN({ access_token, refresh_token: refreshToken.value, shopAssistantPhone: tel.value })
    uni.reLaunch({ url: '/pages/home/Index' })
}
async function initStoreInfo() {
    const { code, data, msg } = await doGetStoreInfoByShopAssistantPhone(tel.value)
    if (code !== 200)
        return uni.showToast({
            title: `${msg ? msg : '请求错误'}`,
            icon: 'none',
        })
    $useStoreInfoStore.SET_STORE_INFO(data)
}
</script>

<template>
    <view class="sign">
        <image class="sign__img" src="https://bgniao-small-file-1253272780.cos.ap-chengdu.myqcloud.com/b2b2c-develop/store-image.png" />
        <view class="sign__input">
            <u-field v-model="tel" label="手机号" maxlength="11" style="color: #999999" @blur="initStoreInfo"> </u-field>
            <view class="sign__input-compose">
                <u-field v-model="code" label="验证码" maxlength="6" style="color: #999999" :border="false"> </u-field>
                <view v-show="!hasCountDown" class="sign__input-compose--btn" @click="getCodeHandle">获取验证码</view>
                <q-count-down v-show="hasCountDown" ref="countDownRef" :timestamp="countDown" format="mm:ss" @end="countFinishHandle" />
            </view>
        </view>
        <u-button class="sign__but" type="primary" shape="circle" @click="handleSign">登录</u-button>
    </view>
    <slider-captcha v-model="showSliderCaptcha" :get-form="() => tel" sms-type="LOGIN" :do-submit="doPostSmsCode" :scale="2" @success="success" />
</template>

<style lang="scss" scoped>
page {
    background: #fff;
}
@include b(sign) {
    @include e(img) {
        display: block;
        margin: 0 auto;
        width: 292rpx;
        height: 274rpx;
        margin-top: 156rpx;
    }
    @include e(input) {
        margin: 0 auto;
        margin-top: 44rpx;
        border-radius: 10rpx;
        border: 1px solid #f3f3f3;
        width: 540rpx;
    }
    @include e(input-compose) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f3f3f3;
        @include m(btn) {
            font-size: 26rpx;
            color: #409eff;
            width: 195rpx;
        }
    }
    @include e(but) {
        margin: 0 auto;
        margin-top: 298rpx;
        width: 540rpx;
        line-height: 88rpx;
        text-align: center;
        color: #fff;
        height: 88rpx;
        border-radius: 92rpx;
        box-shadow: 0px 4px 8px 0px rgba(44, 44, 232, 34);
    }
}
</style>
